<template>
    <div
        class="wrapper"
        ref="wrapper"
        :style="scrollStyle"
    >
        <div>
            <div
                class="top-tip"
                v-if="isPulldown"
            >
                下拉加载更多...
            </div>
            <slot></slot>
        </div>
        <!-- 回到顶部按钮 -->
        <a
            class="go-top"
            v-show="isGoTop"
            @click="goTop"
        >
            <img src="../assets/images/home/top.png" />
        </a>
        <!-- 回到顶部按钮 -->
    </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
    name: 'CommonScroll',
    props: [
        'scrollStyle',
        'isLoadMore',
        'isPulldown',
        'data',
        'scrollToEndFlag',
        'listenScroll'
    ],
    data() {
        return {
            isGoTop: false,
            historyLocation: 0
        }
    },
    methods: {
        initScroll() {
            if (!this.$refs.wrapper) {
                return
            }
            this.$nextTick(() => {
                if (!this.scroll) {
                    // better-scroll的初始化
                    this.scroll = new BScroll(this.$refs.wrapper, {
                        probeType: 2,
                        mouseWheel: true,
                        click: true,
                        tap: true,
                        scrollY: true
                    })
                    if (this.scrollToEndFlag) {
                        this.scroll.scrollTo(0, this.scroll.maxScrollY)
                        this.$emit('isToBottom')
                    }
                    if (this.isLoadMore && this.scroll) {
                        this.scroll.on('scrollEnd', () => {
                            // 滚动到底部
                            if (
                                this.scroll.y <=
                                this.scroll.maxScrollY + 1000
                            ) {
                                this.$emit('pullup')
                            }
                        })
                    }
                    if (this.isPulldown && this.scroll) {
                        this.scroll.on('touchEnd', pos => {
                            // 下拉动作
                            if (pos.y > 50) {
                                this.$emit('pulldown')
                            }
                        })
                    }
                    if (this.scroll) {
                        this.scroll.on('scrollEnd', pos => {
                            // 需要缓存的页面处理--记录浏览历史位置
                            if (this.$route.meta.keepAlive == true) {
                                this.historyLocation = pos.y
                            }
                            if (Math.abs(pos.y) > 1500) {
                                this.isGoTop = true
                            } else {
                                this.isGoTop = false
                            }
                        })
                    }
                    if (this.listenScroll) {
                        let me = this
                        this.scroll.on('scroll', pos => {
                            me.$emit('scroll', pos.y)
                        })
                    }
                } else {
                    this.scroll.refresh()
                    // 需要缓存的页面处理--返回浏览历史位置
                    if (this.$route.meta.keepAlive == true) {
                        this.scroll.scrollTo(0, this.historyLocation)
                    }
                }
            })
        },
        goTop() {
            this.scroll.scrollTo(0, 0, 1000)
        }
    },
    mounted() {
        setTimeout(() => {
            this.initScroll()
        }, 20)
        document.body.addEventListener(
            'load',
            () => {
                //事件委托
                if (this.scroll) {
                    this.scroll.refresh()
                }
            },
            'img'
        )
    },
    watch: {
        // 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
        data(data) {
            setTimeout(() => {
                this.scroll.refresh()
            }, 20)
        },
        scrollToEndFlag(curVal, oldVal) {
            if (curVal) {
                this.scroll.refresh()
                setTimeout(() => {
                    this.scroll.scrollTo(0, this.scroll.maxScrollY, 200)
                    this.$emit('isToBottom')
                }, 20)
            }
        }
    },
    activated() {
        this.initScroll()
    }
}
</script>

<style lang="stylus" scoped>
.wrapper
    position absolute
    overflow hidden
    .top-tip
        position absolute
        top -0.8rem
        left 0
        right 0
        line-height 0.8rem
        text-align center
        font-size 0.33rem
        color #999
    .go-top
        position fixed
        bottom 4.5rem
        right 0.26rem
        width 1.3rem
        height 1.3rem
        border-radius 100%
        display flex
        align-items center
        justify-content center
        background-color rgba(0, 0, 0, 0.7)
        z-index 3
    .go-top img
        width 0.8rem
        height 0.8rem
</style>


